<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合同管理 - HRM系统</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/contract.css}">
</head>
<body>
<div class="dashboard">
    <header class="header">
        <div class="logo">HRM系统</div>
        <div class="user-info">
            <span th:text="${currentUser.realName}"></span>
            <span class="role-badge" th:text="${currentUser.roleId.roleName}"></span>
            <a href="/logout" class="logout-btn">退出</a>
        </div>
    </header>
    <main class="contract-container">
        <!-- 返回首页按钮 -->
        <div class="back-to-home">
            <a href="/home" class="btn btn-back">← 返回首页</a>
        </div>

        <!-- 页面标题和操作按钮 -->
        <div class="module-header">
            <h1 class="module-title">合同管理</h1>
            <div class="action-buttons" th:if="${roleIdValue < 4}"> <!-- 根据权限显示 -->
                <a href="/contract/add" class="btn btn-primary">添加合同</a>
                <button onclick="exportContracts()" class="btn btn-export">导出Excel</button>
                <script>
                    function exportContracts() {
                        window.open('/api/contract/export', '_blank');
                    }
                </script>
            </div>
        </div>

        <!-- 搜索筛选区域 -->
        <div class="search-filter">
            <form th:action="@{/contract}" method="get" class="search-form">
                <div class="filter-row">
                    <div class="form-group">
                        <select name="departmentId" class="form-control">
                            <option value="">全部部门</option>
                            <option
                                    th:each="dept : ${departments}"
                                    th:value="${dept.departmentID}"
                                    th:text="${dept.departmentName}"
                                    th:selected="${currentDepartmentId == dept.departmentID}">
                            </option>
                        </select>
                    </div>
                    <div class="form-group">
                        <select name="contractType" class="form-control">
                            <option value="">全部类型</option>
                            <option
                                    th:each="type : ${contractTypes}"
                                    th:value="${type}"
                                    th:text="${type}"
                                    th:selected="${currentContractType == type.toString()}">
                            </option>
                        </select>
                    </div>
                    <div class="form-group">
                        <select name="status" class="form-control">
                            <option value="">全部状态</option>
                            <option
                                    th:each="status : ${statuses}"
                                    th:value="${status}"
                                    th:text="${status}"
                                    th:selected="${currentStatus == status.toString()}">
                            </option>
                        </select>
                    </div>
                </div>
                <div class="button-row">
                    <button type="submit" class="btn btn-search">搜索</button>
                    <button
                            type="reset"
                            class="btn btn-reset"
                            onclick="location.href='/contract'">重置</button>
                </div>
            </form>
        </div>

        <div th:if="${successMessage}" class="alert alert-success" style="display: none;">
            <span th:text="${successMessage}"></span>
        </div>
        <div th:if="${errorMessage}" class="alert alert-danger" style="display: none;">
            <span th:text="${errorMessage}"></span>
        </div>

        <!-- 表格数据展示 -->
        <table class="data-table">
            <thead>
            <tr>
                <th width="12%">合同编号</th>
                <th width="15%">合同名称</th>
                <th width="7%">合同类型</th>
                <th width="6%">甲方</th>
                <th width="6%">乙方</th>
                <th width="19%">合同期限</th>
                <th width="10%">状态</th>
                <th width="12%">所属部门</th>
                <th width="15%">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="contract : ${contracts}" th:class="${contract.isOverdue} ? 'overdue-row' : ''">
                <td th:text="${contract.contractNumber}"></td>
                <td th:text="${contract.contractName}"></td>
                <td th:text="${contract.contractType}"></td>
                <td th:text="${contract.signingPartyA.realName}"></td>
                <td th:text="${contract.signingPartyB.realName}"></td>
                <td>
                    <span th:text="${#temporals.format(contract.effectiveDate, 'yyyy-MM-dd') + ' - ' + #temporals.format(contract.expiryDate, 'yyyy-MM-dd')}"></span>
                </td>
                <td>
                    <!-- 先计算状态 -->
                    <span th:with="status=${contract.status?.name()}"
                        th:text="${status}"
                        th:class="${status == '履行中'} ? 'status-active' :
                        (status == '已终止' ? 'status-inactive' : 'status-overdue')">
                      </span>
                    <!-- 逾期信息 -->
                    <div th:if="${contract.isOverdue}" class="overdue-info">
                        逾期天数: <span th:text="${contract.overdueDays}"></span>天<br>
                        违约金基准: LPR <span th:text="${#numbers.formatDecimal(contract.penaltyRate.multiply(new java.math.BigDecimal(1000)), 1, 3)}"></span>‰
                    </div>
                </td>
                <td th:text="${contract.department?.departmentName}"></td>
                <td class="action-buttons">
                    <!-- 第一行：查看和编辑按钮 -->
                    <div class="button-row">
                        <a th:href="@{/contract/view/{id}(id=${contract.contractId})}" class="btn-action view">查看</a>
                        <a th:href="@{/contract/edit/{id}(id=${contract.contractId})}"
                           class="btn-action edit"
                           th:if="${roleIdValue < 4 or (roleIdValue == 4 and contract.department.departmentID == currentUser.departmentID.departmentID)}">编辑</a>
                    </div>
                    <!-- 第二行：导出和终止按钮（终止按钮根据状态显示） -->
                    <div class="button-row">
                        <a th:href="@{/contract/export/{id}(id=${contract.contractId})}" class="btn-action export">导出</a>
                        <a th:href="@{/contract/terminate/{id}(id=${contract.contractId})}"
                           class="btn-action terminate"
                           th:if="${contract.status.name() != '已终止'}"
                           data-method="post">终止</a>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>

        <!-- 分页组件 -->
        <nav class="pagination" th:if="${contracts.totalPages > 0}">
            <ul>
                <li th:if="${contracts.hasPrevious()}">
                    <a th:href="@{'/contract'(page=0,
                departmentId=${currentDepartmentId},
                contractType=${currentContractType},
                status=${currentStatus})}">&laquo;</a>
                </li>
                <!-- 确保至少显示第1页 -->
                <li th:each="i : ${#numbers.sequence(1, contracts.totalPages > 0 ? contracts.totalPages : 1)}"
                    th:class="${i == (contracts.number + 1)} ? 'active'">
                    <a th:href="@{'/contract'(page=${i - 1},
                departmentId=${currentDepartmentId},
                contractType=${currentContractType},
                status=${currentStatus})}"
                       th:text="${i}"></a>
                </li>
                <li th:if="${contracts.hasNext()}">
                    <a th:href="@{'/contract'(page=${contracts.totalPages - 1},
                departmentId=${currentDepartmentId},
                contractType=${currentContractType},
                status=${currentStatus})}">&raquo;</a>
                </li>
            </ul>
        </nav>
    </main>
</div>
<script th:inline="javascript">
    document.addEventListener('DOMContentLoaded', function() {
        // 显示提示消息
        const successMessage = document.querySelector('.alert-success');
        const errorMessage = document.querySelector('.alert-danger');

        if (successMessage) {
            successMessage.style.display = 'block';
            setTimeout(() => {
                successMessage.style.display = 'none';
            }, 3000);
        }

        if (errorMessage) {
            errorMessage.style.display = 'block';
            setTimeout(() => {
                errorMessage.style.display = 'none';
            }, 3000);
        }
    });
</script>
<script th:src="@{/js/contract.js}"></script>
</body>
</html>